<template>
  <div class="domain-commendManager" v-loading.fullscreen.lock="fullscreenLoading">
    <p class="page-title">
      <i class="el-icon-monitor"></i> 评论管理
    </p>
    <div class="comment-container" :style="'width:'+screenHeigth+''">
      <div class="comment-list">
        <div class="commend-item" v-for="(item,index) in comment.records" :key="index">
          <div class="article-commend-user-avatar">
            <a :href="'/user?author_id='+$store.getters.loginData.id">
              <img :src="$store.getters.loginData.avatar" />
            </a>
          </div>
          <div class="article-commend-info">
            <div class="article-commend-nickName">
              <a :href="'/user?author_id='">{{$store.getters.loginData.nickName}}</a>
              <span>评论了:</span>
              <a :href="'/detail?contentId='+item.blog_article.id">《{{item.blog_article.title}}》</a>
            </div>
            <div class="article-commend-desc">
              <span>{{item.publishTime}}</span>
            </div>
          </div>
          <div style="clear:both;"></div>
          <div class="article-commend-content">
            <p v-html="item.content"></p>
          </div>
          <div class="article-commend-icon">
            <span @click="delReply(item.id,index)">
              <i class="el-icon-delete"></i> 删除
            </span>
          </div>
          <el-divider></el-divider>
        </div>
      </div>
      <el-pagination background layout="prev, pager, next" :total="comment.total" @current-change="this.PageHandler"></el-pagination>
    </div>
  </div>
</template>

<script>
import { fetch, post } from "@/utils/httpRequest";
export default {
  data() {
    return {
      fullscreenLoading:true,
      screenHeigth:
        document.body.clientWidth < 500
          ? document.body.clientWidth + "px"
          : "100%",
      activeName: "first",
      param: {
        pageIndex: 1,
        pageSize: 10
      },
      comment: []
    };
  },
  created: function() {
    this.getCommentList();
  },
  methods: {
    getCommentList() {
      fetch(this.http.blog_article.comment.getComment, this.param).then(
        response => {
          if (response.success) {
            this.comment = response.data;
          }
          this.fullscreenLoading=false;
        }
      );
    },
    delReply(id, index) {
      this.$confirm("确定要删除此评论吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass:"delete-tip"
      }).then(() => {
        this.fullscreenLoading=true;
        post(this.http.blog_article.comment.delComment, { commentId: id }).then(
          response => {
            if (response.success) {
              this.$notify.success({
                title: "通知",
                message: response.message
              });
              this.getCommentList();
            }
          }
        );
      });
    },
    PageHandler(val){
        this.param.pageIndex=val;
        this.getCommentList();
    }
  }
};
</script>

<style scoped>
.el-pagination {
  text-align: center;
}
.el-divider {
  margin: 10px 0px;
}
.article-commend-icon span:hover {
  color: red;
}
.article-commend-icon span {
  cursor: pointer;
  padding-right: 15px;
}
.article-commend-icon {
  color: black;
  font-size: 12px;
  margin: 5px 30px;
}
.comment-list {
  margin: 5px;
}
.article-commend-content {
  margin: 5px 30px;
  font-size: 12px;
}
.article-commend-desc {
  font-size: 12px;
  color: #ccc;
}
.article-commend-nickName a,
span {
  font-size: 12px;
}
.article-commend-info {
  line-height: 20px;
}
.article-commend-user-avatar,
.article-commend-info {
  float: left;
  margin-left: 10px;
}
.article-commend-user-avatar img {
  width: 40px;
  height: 40px;
  border-radius: 100%;
}
.domain-commendManager {
  width: 100%;
  height: 100%;
}
</style>
